<template>
  <template 
    v-for="(item,code) in menuData" 
    :key="code"
  >
    <el-sub-menu 
      v-if="item[children] && item[children].length"
      :index="item[value]" 
    >
      <template #title>
        <i 
          v-if="item[iconfont]" 
          class="iconfont" 
          :class="`icon-${item[iconfont]}`"
        ></i>
        <span>{{ item[label] }}</span>
      </template>
      <EvMenuItem 
        :menu-data="item[children]"
        :menu-keys="props.menuKeys"
      ></EvMenuItem>
    </el-sub-menu>
    <el-menu-item 
      v-else
      :index="item[value]" 
    >
      <i 
        v-if="item[iconfont]" 
        class="iconfont" 
        :class="item[iconfont]"
      ></i>
      <span>{{ item[label] }}</span>
    </el-menu-item>
  </template>
</template>
<script lang='ts' setup name="EvMenuItem">
import { ref, PropType, computed } from 'vue'

interface obj {
  label?:string,
  value?:string,
  iconfont?:string,
  children?:string,
  [key:string]:any
}

interface keys {
  label:string,
  value:string,
  children:string,
  iconfont:string,
}

const props = defineProps({
    menuData: {
        type: Array as PropType<obj[]>,
        require: true,
        default: () => [],
    },
    menuKeys: {
        type: Object as PropType<keys>,
        default: () => ({ 
            label: 'label', value: 'value', children: 'children', iconfont: 'iconfont',
        }),
    },
})
const label = computed<string>(() => props.menuKeys.label)
const value = computed<string>(() => props.menuKeys.value)
const children = computed<string>(() => props.menuKeys.children)
const iconfont = computed<string>(() => props.menuKeys.iconfont)
</script>
<style scoped lang='scss'>

</style>